<template>
  <div>
    <bk-form :label-width="200" form-type="vertical">
      <bk-form-item label="标题" :required="true">
        <bk-input v-model="detailData.title" v-if="!detailId"></bk-input>
        <span v-else>{{detailData.title}}</span>
      </bk-form-item>
      <bk-form-item label="内容" :required="true">
        <mavon-editor v-model="detailData.content"
                      :toolbars-flag="!Boolean(detailId)" :subfield="false" :editable="!detailId" />
      </bk-form-item>
    </bk-form>
    <bk-button style="margin-top: 30px" @click="handleClick">{{ detailId ? '返回' : '保存'}}</bk-button>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      detailData: {
        title: '',
        content: '',
      },
    };
  },
  computed: {
    detailId() {
      return this.$route.params.id;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.detailId && this.getDetail();
  },
  beforeRouteEnter(to, form, next) {
    console.log('beforeRouteEnter', this);
    next();
  },
  beforeRouteLeave(to, form, next) {
    console.log('beforeRouteLeave', this);
    next();
  },
  methods: {
    handleClick() {
      if (this.detailId) {
        this.$router.replace({ name: 'list' });
        return;
      }
      this.createBBs();
    },
    createBBs() {
      this.$store.dispatch('bbs/createBBs', this.detailData).then((res) => {
        this.$router.replace({ name: 'list' });
      });
    },
    getDetail() {
      this.$store.dispatch('bbs/getDetail', this.detailId).then((res) => {
        this.detailData = res.data;
      });
    },
  },
};
</script>
<style>

</style>
